<!--  -->
<template>
  <div class='directly-page'>
    <van-sticky>
      <van-tabs 
        v-model="active" 
        :line-height="3" 
        line-width="15px" 
        title-active-color="#FE5E56" 
        color="#FE5E56" 
        title-inactive-color="#00001C"
        :ellipsis="false"
        @click="directlyTab">
        <block v-for="(item,index) in gradeArr" :key="index">
          <van-tab :name="item.id">
            <template #title>
              <div class="level-title">
                {{item.level_name}}<span>({{item.user_count}})</span> 
              </div>
            </template>
          </van-tab>
        </block>
      </van-tabs>
    </van-sticky>
    
    <div class="directly-list" v-if="directlyList.length > 0">
      <block v-for="(item,index) in directlyList" :key="index">
        <div class="directly-item" @click="directlyOn(index)">
          <div class="directly-info flex-a-c flex-j-sb">
            <div class="info-user flex-a-c">
              <van-image
                round
                width="24px"
                height="24px"
                :src="item.member && item.member.avatar"
              />
              <h3>{{item.member && item.member.nickname}}</h3>
            </div>
            <div class="iconfont icon-icon_more1" :class="item.checked?'iconRight':''"></div>
          </div>
          <div class="directly-underling flex " :class="item.checked?'under-height':''">
            <div class="underling-item flex">
              <span>下级直属{{managerName}}：{{item.manager_children_count}}</span>
              <span>{{item.minion}}</span>
            </div>
            <div class="underling-item flex">
              <span>自购订单金额：</span>
              <span>{{item.self_score}}</span>
            </div>
          </div>
        </div>
      </block>
    </div>
    <van-empty description="暂无数据" v-else/>
  </div>
</template>

<script>
import directly_controller from "./directly_controller.js";
export default directly_controller;
</script>
<style scoped>
  .directly-page ::v-deep .van-tabs__line {
    bottom:21px;
  }
  /* .directly-page .level-title span {
    color: #AAAAB3;
  } */
  .directly-page  ::v-deep .van-tab--active .level-title span{
    color:#FE5E56;
  }
</style>
<style lang="scss" scoped>
/* @import url(); 引入公共css类 */
  .directly-list {
    margin:12px 12px 0 12px;
    .directly-item {
      background-color: #fff;
      padding:12px 12px 0 12px;
      border-radius: 5px;
      margin:0 0 12px 0;
      cursor: pointer;
      .directly-info {
        padding:0 0 12px 0;
        .info-user {
          h3 {
            font-size: 14px;
            color: #3B3B4A;
            font-weight: 400;
            padding:0 0 0 8px;
          }
        }
        .icon-icon_more1 {
          color:#B9B9C0;
          font-size:8px;
          transition:0.5s;
          transform: rotate(0deg);
        }
        .iconRight {
          transition:0.5s;
          transform: rotate(90deg);
        }
      }
      .directly-underling {
        height: 0px;
        // display: none;
        overflow: hidden;
        border-top: 1px solid #F0F0F1;
        // padding:12px 0;
        opacity: 0;
        transition: 0.2s;
        .underling-item {
          flex: 0 0 50%;
          span {
            font-size: 13px;
            color:#3B3B4A;
            &:nth-child(1) {
              color: #6E6E79;
            }
          }
          
        }
      }
      .under-height {
        padding:12px 0;
        transition: 0.2s;
        overflow:auto;
        opacity: 1;
        height: 100%;
      }
    }
  }
</style>